import { reqGetCityList, reqGetHospitalList } from '@/api/hospital/hospitalList';
import { CityList, HospitalItem, HospitalListType, SearchHospitalListParams } from '@/api/hospital/model/hospitalListType';
import { Button, Card, Form, Input, Select, Space, Table, Tag } from 'antd'
import { useForm } from 'antd/lib/form/Form';
import { ColumnsType } from 'antd/lib/table';
import { useEffect, useState } from 'react'
import "./HospitalList.less"
import { useNavigate } from 'react-router-dom';
const { Option } = Select;

export default function HospitalList() {
    const [hospitalList, setHospitalList] = useState<HospitalListType>([]);
    const [current, setCurrent] = useState(1);
    const [pageSize, setPageSize] = useState(5);
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(false);
    const [searchParams, setSearchParams] = useState<SearchHospitalListParams>({});
    const [province, setProvince] = useState<CityList>([])
    const [city, setCity] = useState<CityList>([])
    const [district, setDistrict] = useState<CityList>([])
    const [hostypeList, setHostypeList] = useState<CityList>([])
    const [form] = useForm()

    const columns: ColumnsType<HospitalItem> = [
        {
            title: '序号',
            render: (row, records, index) => index + 1
        },
        {
            title: "医院logo",
            render: (row) => <img className="hospital-logo" src={`data:image/jpeg;base64,${row.logoData}`} alt={row.hosname} />,
        },
        {
            title: "医院名称",
            dataIndex: "hosname"
        },
        {
            title: "等级",
            render: (row) => row.param.hostypeString,
        },
        {
            title: "详细地址",
            render: (row) => row.param.fullAddress,
        },
        {
            title: "状态",
            render: (row) => (
                <Tag color={row.status == 1 ? 'green' : 'red'} key={row.id}>
                    {row.status == 1 ? '已上线' : '未上线'}
                </Tag>
            ),
        },
        {
            title: "创建时间",
            dataIndex: "createTime"
        },
        {
            title: "操作",
            render: (row) => {
                return (
                    <Space>
                        <Button type="primary" onClick={() => toShow(row)}>查看</Button>
                        <Button type="primary">排版</Button>
                        <Button type="primary">上线</Button>
                    </Space>
                )
            }
        }
    ]

    useEffect(() => {
        getHospitalList(current, pageSize, searchParams); // 第一次搜索searchParams是空对象
        getProvince()
        getHostypeList()
    }, [])

    // 获取医院列表
    const getHospitalList = async (current: number, pageSize: number, searchParams: SearchHospitalListParams) => {
        setLoading(true);
        const res = await reqGetHospitalList({ page: current, limit: pageSize, ...searchParams });
        setHospitalList(res.content); // 更新医院列表数据
        setCurrent(current); // 更新当前页码
        setPageSize(pageSize); // 更新每页条数
        setTotal(res.totalElements); // 更新总数
        setLoading(false);
    };

    const getHostypeList = async () => {
        const hostypeList = await reqGetCityList(10000);
        setHostypeList(hostypeList);
    };

    const getProvince = async () => {
        const province = await reqGetCityList(86);
        setProvince(province);
    };

    const handleProvinceChange = async (value: number) => {
        const city = await reqGetCityList(value);
        setCity(city);
        setDistrict([]);
        form.resetFields(["cityCode", "districtCode"]);
    }

    const handleCityChange = async (value: number) => {
        const district = await reqGetCityList(value);
        setDistrict(district);
        form.resetFields(["districtCode"]);
    }

    const handleDistrictChange = () => {

    }

    const onFinish = (values: SearchHospitalListParams) => {
        setSearchParams(values);
        getHospitalList(1, 5, values);
    };

    const reset = () => {
        form.resetFields()
    }

    const navigate = useNavigate()

    const toShow = (row: HospitalItem) => {
        navigate('/syt/hospital/hospitalList/show', { state: row })
    }
    return (
        <Card>
            <Form
                layout="inline"
                form={form}
                onFinish={onFinish}
            >
                <Form.Item name="provinceCode">
                    <Select
                        style={{ width: 120 }}
                        onChange={handleProvinceChange}
                        placeholder="请选择省"
                    >
                        {province.map((provinceItem) => {
                            // value使用id，因为将来使用id去请求市数据
                            return (
                                <Option key={provinceItem.id} value={provinceItem.id}>
                                    {provinceItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name="cityCode">
                    <Select
                        style={{ width: 120 }}
                        onChange={handleCityChange}
                        placeholder="请选择市"
                    >
                        {city.map((cityItem) => {
                            // value使用id，因为将来使用id去请求市数据
                            return (
                                <Option key={cityItem.id} value={cityItem.id}>
                                    {cityItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name="districtCode">
                    <Select
                        style={{ width: 120 }}
                        onChange={handleDistrictChange}
                        placeholder="请选择区"
                    >
                        {district.map((districtItem) => {
                            // value使用id，因为将来使用id去请求市数据
                            return (
                                <Option key={districtItem.id} value={districtItem.id}>
                                    {districtItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name="hosname">
                    <Input placeholder="医院名称"></Input>
                </Form.Item>
                <Form.Item name="hoscode">
                    <Input placeholder="医院编号"></Input>
                </Form.Item>
                <Form.Item name="hostype">
                    <Select
                        style={{ width: 120 }}
                        onChange={handleDistrictChange}
                        placeholder="医院类型"
                    >
                        {hostypeList.map((hostypeItem) => {
                            // value使用id，因为将来使用id去请求市数据
                            return (
                                <Option key={hostypeItem.id} value={hostypeItem.id}>
                                    {hostypeItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name="status">
                    <Select
                        style={{ width: 120 }}
                        onChange={handleDistrictChange}
                        placeholder="医院状态"
                    >
                        <Option value={0}>未上线</Option>
                        <Option value={1}>已上线</Option>
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType="submit">查询</Button>
                        <Button onClick={reset} >清空</Button>
                    </Space>
                </Form.Item>
            </Form>

            <Table
                className='mt'
                columns={columns}
                dataSource={hospitalList}
                loading={loading}
                rowKey="id"
                pagination={{
                    current,
                    pageSize,
                    total,
                    pageSizeOptions: [5, 10, 15, 20],
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total) => `总共：${total}`,
                    onChange: (current, pageSize) => {
                        // 发送请求，请求新的数据
                        getHospitalList(current, pageSize, searchParams);
                    },
                }}
            >

            </Table>
        </Card>
    )
}
